<template>
  <div class="login_container">
  <vue-particles style=" width:100%; height:100%" class="login-bg" color="#39AFFD" :particleOpacity="0.7" :particlesNumber="100" shapeType="star" :particleSize="3" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
    </vue-particles>
    <!-- 主体盒子 -->
    <div class="main-box">
      <!-- 上半圆 -->
      <div class="circle circle-top"></div>
      <!-- 下半圆 -->
      <div class=" circle circle-bottom"></div>
      <!-- 左侧欢迎 -->
      <div class="welcome-container">
        <h2> Welcome Back !</h2>
        <p>To keep connected with us please login with your personal info</p>
      </div>
      <!-- 右侧登录账号 -->
      <div class="login-form">
        <h2 class="title">后台管理系统</h2>
        <el-form class="login_form" ref="LoginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px">
          <!-- label是文本宽度 :model绑定上数据对象 相当于父传子 子组件拿到数据并保存起来 -->
          <!-- 用户名 -->
          <el-form-item prop="username">
            <!-- rules和prop是数据验证的 rules放所有规则 -->
            <el-input v-model="loginForm.username"  prefix-icon="el-icon-user-solid"></el-input> <!-- prefix是在前面添加图标 v-model取对应的数据 -->
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input  v-model="loginForm.password"  prefix-icon="el-icon-goods" type="password"></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 这是表单的验证规则对象
       loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' } /* 必填项，鼠标失焦触发验证 */,
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
   methods: {
    // 表单重置 通过ref调用resetFields函数
    resetLoginForm() {
      this.$refs.LoginFormRef.resetFields();
    },
    login() { /* 点击登录进行预验证 即是否符合规则 符合valid为true 否则为false */
      this.$refs.LoginFormRef.validate(async valid => {
        // 1.验证是否通过
        if (!valid) return alert('输入错误')
        // 2.获取接口信息
        
        // 3.跳转路由页面
        this.$router.push('/home')
      })
    }
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar{
  width: 0;
}
</style>
<style lang="less" scoped>
.login_container {
  position: relative;
  background-color: rgb(236, 240, 243);
  // background-color: #eee;
  height: 100%;
  // 动态粒子
  #particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
// 主体盒子
  .main-box {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    width: 700px;
    height: 400px;
    background-color: #ecf0f3;
    box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
    // 半圆
    .circle {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: #ecf0f3;
      box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
      transition: 1.25s;
    }
    // 上半圆
    .circle-top {
      top: 0;
      left: 200px;
      border-radius: 0 0 0 100px;
    }
    // 下半圆
    .circle-bottom {
      bottom: 0;
      left: 0;
      border-radius: 0 100px 0 0;
    }
    // 左侧欢迎页面
    .welcome-container {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 300px;
      padding: 0 20px;
      // background-color: #ecf0f3;
      box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        font-size: 12px;
      }
    }
    // 右侧登录页面
   /deep/ .login-form {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .login_form {
        margin-top: 20px;
        width: 66%;
        input {
          background-color: #ecf0f3;
          transition: 0.25s ease;
          border-radius: 8px;
          box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
        }
        .btns {
          display: flex;
          justify-content: center;
        }
        .el-button {
          height: 32px;
          width: 65px;
          border-radius: 57px;
          font-size: 12px;
        }
      }
    }
  }
}
#particles-js{
    width: 100%;
    height: 100%;
    // position: absolute;
    position:fixed;
    // background: url("../../assets/img/user-home-bgd1.jpg");
    // background-size: 100%;
}
</style>